<!-- Dom模板 -->
<template>
    
  <div class="dingyuebox">
        <!-- Dom内容 -->
    <div class="dingyue_head">
      <p class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></p>
      <h3>订阅</h3>
    </div>
       
    <div>
      <ul class="BT_epinasty">
        <li v-for="(item, index) in datalist" class="BT_Econt" :key="index">
          <div><img :src="item.book_img_url" /></div>
          <!-- <div><img src="../../../static/img/v2_qsk67k.png" /></div> -->
          <div class="BT_Eitem">
            <div>{{ item.bookname }}</div>
            <div>{{ item.describes }}</div>
            <div>已播放至第{{ item.episodeNum }}集</div>
            <!-- <div>{{ item.episodeNum }}</div> -->
            <div class="BT_btn">
              <div>{{ item.money }}点券</div>
              <div>
                <button @click="btnClick(item, index)">立即播放</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      datalist: [],
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {
    if (sessionStorage.getItem("userId")) {
      this.$store
        .dispatch("bags/getUserMsg", {
          userid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          // console.log(res);
          this.$store
            .dispatch("login/getUser", {
              userid: sessionStorage.getItem("userId"),
            })
            .then((res) => {
              this.$store.state.bags.subscriptionData.forEach((item, index) => {
                let findIndex1 = this.datalist.findIndex((item1, index1) => {
                  return item1.bookid === item.bookid;
                });
                if (findIndex1 === -1) {
                  this.datalist.push(item);
                }
              });
              this.datalist.forEach((item, index) => {
                let findIndex =
                  this.$store.state.login.loginuserMsg.viewing.cont.findIndex(
                    (item1, index1) => {
                      return item.bookid === item1.bookid;
                    }
                  );
                if (findIndex === -1) {
                  // 播放到
                  item.episodeNum = "1";
                } else {
                  console.log(
                    this.$store.state.login.loginuserMsg.viewing.cont[findIndex]
                  );
                  console.log(
                    this.$store.state.login.loginuserMsg.viewing.cont[findIndex]
                      .diversity
                  );
                  item.episodeNum =
                    this.$store.state.login.loginuserMsg.viewing.cont[
                      findIndex
                    ].diversity;
                  console.log(item, "item");
                }
              });
              console.log(this.datalist);
            });
        });
    }
  }, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义
  methods: {
    close() {
      this.$parent.back();
    },
    btnClick(item, index) {
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      // this.$store.dispatch("bags/bookItem", item);
      this.$router.history.push({
        path: "/details",
        query: {
          path: this.$route.path,
        },
      });
    },
  },
};
</script>

<style scoped>
@import url("../../../static/fonts/iconfont.css");
/* @import url(); 引入css类 */
::-webkit-scrollbar {
  display: none;
}
.dingyuebox {
  width: 100vw;
  height: 100vh;
  background: white;
}
.dingyue_head {
  width: 90%;
  height: 1.173333rem;
  margin-left: 3%;
  padding-top: 0.4rem;
}
.dingyue_head p {
  font-size: 0.746667rem;
  float: left;
}
.dingyue_head h3 {
  width: 53%;
  font-size: 0.586667rem;
  line-height: 0.826667rem;
  float: right;
}
.BT_epinasty {
  width: 100%;
  height: 100vh;
  padding: 0.4rem 0.4rem 1.333333rem;
  overflow-y: auto;
}
/* 每一个li */
.BT_Econt {
  display: flex;
  margin-bottom: 0.4rem;
}
.BT_Econt > div:nth-child(1) img {
  width: 2.506667rem;
  border-radius: 0.133333rem;
  height: 3.226667rem;
}
.BT_Eitem {
  margin-left: 0.24rem;
}
.BT_Eitem > div:nth-child(1) {
  font-size: 0.426667rem;
  margin-top: 0.08rem;
  font-weight: 700;
  font-family: SimHei;
  color: #4d4d4d;
}
.BT_Eitem > div:nth-child(2) {
  font-size: 0.346667rem;
  margin-top: 0.106667rem;
  width: 6.32rem;
  line-height: .533333rem;
  height: 1.01rem;
  color: #646b77;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.BT_Eitem > div:nth-child(3) {
  margin-top: .24rem;
  font-size: 0.373333rem;
  color: #b0afb4;
}

/* 按钮 */
.BT_btn {
  display: flex;
  line-height: 0.72rem;
  margin-top: 0.106667rem;
  justify-content: space-between;
}
.BT_btn > div:nth-child(1) {
  font-size: 0.453333rem;
  color: #ff3c3c;
}
.BT_btn button {
  font-size: 0.266667rem;
  width: 1.626667rem;
  border-radius: 0.133333rem;
  color: #f44b65;
  height: .72rem;
  border: none;
  border: 2px solid #fab4c4;
  background-color: white;
}
</style>